<template>
  <section class="plant-box">
    <plant-header :modelValue="modelValue" btnText="更多" btnClass="hidden-btn"></plant-header>
    <ul class="list-box">
      <li v-for="item in listData" :key="item.t_content_pk" class="list-item">
        <router-link :to="getRowUrl($route.params,item)">{{ item.title }}</router-link>
      </li>
    </ul>
  </section>
  
  
</template>

<script>
import { secondPlant } from "@/util/mixin";
export default {
  mixins: [secondPlant],
  data() {
    return {
      swiperRows: 0,
      listRows: 8,
    }
  }
};
</script>

<style scoped>
  .list-box {
    height: 280px;
    border-radius: 15px;
    background-color: #fff;
    padding: 10px 0px;
  }

  .list-item {
    padding: 0px 10px;
    position: relative;
  }

  .list-item::after {
    content: "";
    display: block;
    position: relative;
    width: 0%;
    border-bottom: 2px solid var(--base-color);
    transition: all 0.5s;
  }

  .list-item:hover::after {
    width: 100%;
  }
  
  .list-item>a {
    display: block;
    line-height: 30px;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /deep/.hidden-btn {
    visibility: hidden;
  }

  /deep/.header:hover>.hidden-btn {
    visibility: visible;
  }
</style>